<template>
  <div class="wrap">
    <!-- 页头区域 -->
    <div class="wrap_head head_white">
      <!-- 点击搜索icon 添加类名 search_area_show 隐藏菜单，显示输入框 -->
      <!-- 添加类名 submenu_show 显示子菜单 -->

      <!-- <div class="head_con">
        <a class="logo" href="https://www.tencent.com/zh-cn/index.html"
          ><h1>Tencent腾讯</h1></a
        >
        <ul class="menu_list">
          <li class="menu_item">
            <a class="txt" href="https://www.tencent.com/zh-cn/about.html"
              >简介</a
            >
            <ul class="sub_list">
              <li>
                <a href="https://www.tencent.com/zh-cn/about.html#about-con-1"
                  >公司简介</a
                >
              </li>
              <li>
                <a href="https://www.tencent.com/zh-cn/about.html#about-con-2"
                  >愿景及使命</a
                >
              </li>
              <li>
                <a href="https://www.tencent.com/zh-cn/about.html#about-con-3"
                  >发展历程</a
                >
              </li>
              <li>
                <a href="https://www.tencent.com/zh-cn/about.html#about-con-4"
                  >业务架构</a
                >
              </li>
              <li>
                <a href="https://www.tencent.com/zh-cn/about.html#about-con-5"
                  >管理团队</a
                >
              </li>
              <li>
                <a href="https://www.tencent.com/zh-cn/about.html#about-con-6"
                  >企业文化</a
                >
              </li>
              <li>
                <a href="https://www.tencent.com/zh-cn/about.html#about-con-7"
                  >办公地点</a
                >
              </li>
            </ul>
          </li>
          <li class="menu_item">
            <a class="txt" href="https://www.tencent.com/zh-cn/business.html"
              >业务</a
            >
            <ul class="sub_list">
              <li>
                <a href="https://www.tencent.com/zh-cn/business.html"
                  >面向用户</a
                >
              </li>
              <li>
                <a
                  href="https://www.tencent.com/zh-cn/business.html?page-active=to-b"
                  >面向企业</a
                >
              </li>
              <li>
                <a
                  href="https://www.tencent.com/zh-cn/business.html?page-active=innovation"
                  >创新科技</a
                >
              </li>
            </ul>
          </li>
          <li class="menu_item">
            <a class="txt" href="https://www.tencent.com/zh-cn/employees.html"
              >员工</a
            >
            <ul class="sub_list">
              <li>
                <a
                  href="https://www.tencent.com/zh-cn/employees.html#staff-con-1"
                  >人才发展</a
                >
              </li>
              <li>
                <a
                  href="https://www.tencent.com/zh-cn/employees.html#staff-con-2"
                  >腾讯学院</a
                >
              </li>
              <li>
                <a
                  href="https://www.tencent.com/zh-cn/employees.html#staff-con-3"
                  >工作环境</a
                >
              </li>
              <li>
                <a
                  href="https://www.tencent.com/zh-cn/employees.html#staff-con-4"
                  >员工活动</a
                >
              </li>
            </ul>
          </li>
          <li class="menu_item">
            <a
              class="txt"
              href="https://www.tencent.com/zh-cn/responsibility.html"
              >企业责任</a
            >
            <ul class="sub_list">
              <li>
                <a
                  href="https://www.tencent.com/zh-cn/responsibility.html#respon-con-0"
                  >全球战疫</a
                >
              </li>
              <li>
                <a
                  href="https://www.tencent.com/zh-cn/responsibility.html#respon-con-1"
                  >践行承诺</a
                >
              </li>
              <li>
                <a
                  href="https://www.tencent.com/zh-cn/responsibility.html#respon-con-2"
                  >支持善举</a
                >
              </li>
              <li>
                <a
                  href="https://www.tencent.com/zh-cn/responsibility.html#respon-con-3"
                  >鼓励创新</a
                >
              </li>
              <li>
                <a
                  href="https://www.tencent.com/zh-cn/responsibility.html#respon-con-4"
                  >企业社会责任报告</a
                >
              </li>
            </ul>
          </li>
          <li class="menu_item">
            <a class="txt" href="https://www.tencent.com/zh-cn/investors.html"
              >投资者</a
            >
            <ul class="sub_list">
              <li>
                <a
                  href="https://www.tencent.com/zh-cn/investors.html#investors-con-1"
                  >财务新闻</a
                >
              </li>
              <li>
                <a
                  href="https://www.tencent.com/zh-cn/investors.html#investors-con-2"
                  >公告及财务报告</a
                >
              </li>
              <li>
                <a
                  href="https://www.tencent.com/zh-cn/investors.html#investors-con-3"
                  >业绩电话会及路演</a
                >
              </li>
              <li>
                <a
                  href="https://www.tencent.com/zh-cn/investors.html#investors-con-4"
                  >投资者工具包</a
                >
              </li>
              <li>
                <a
                  href="https://www.tencent.com/zh-cn/investors.html#investors-con-5"
                  >证券及债券信息</a
                >
              </li>
              <li>
                <a
                  href="https://www.tencent.com/zh-cn/investors.html#investors-con-6"
                  >企业管治</a
                >
              </li>
            </ul>
          </li>
          <li class="menu_item">
            <a class="txt" href="https://www.tencent.com/zh-cn/media.html"
              >媒体</a
            >
            <ul class="sub_list">
              <li>
                <a href="https://www.tencent.com/zh-cn/media.html#media-con-1"
                  >企业动态</a
                >
              </li>
              <li>
                <a href="https://www.tencent.com/zh-cn/media.html#media-con-2"
                  >财务新闻</a
                >
              </li>
              <li>
                <a href="https://www.tencent.com/zh-cn/media.html#media-con-3"
                  >腾讯视角</a
                >
              </li>
              <li>
                <a href="https://www.tencent.com/zh-cn/media.html#media-con-4"
                  >媒体资料库</a
                >
              </li>
            </ul>
          </li>
          <li class="menu_item menu_item_lan">
            <a class="cn" lang="zh-cn">简体</a> <i class="s_line">|</i>
            <a class="hk" lang="zh-hk">繁体</a> <i class="s_line">|</i>
            <a class="en" lang="en-us">English</a>
          </li>
        </ul>
        <div class="lang_area">
          <a class="lang_ch current" lang="zh-cn">简</a>
          <i class="s_line">|</i> <a class="lang_hk" lang="zh-hk">繁</a>
          <i class="s_line">|</i> <a class="lang_en" lang="en-us">EN</a>
        </div>
      </div> -->
      <div class="icon_menu">
        <a class="i_menu"></a>
        <a class="i_close"></a>
      </div>
      <div class="bg_hover"></div>
    </div>
    <!-- 页头区域 -->

    <div class="header-seat"></div>
    <div class="null_content">
      <!-- 内容区域 -->
      <div class="f">
        <div class="crumbs-1">
          <div class="f-content">
            <a @click="openHomePage">首页</a
            ><img :src="require('@/assets/df4s4.png')" />
            <a @click="openNewstPage">新闻中心</a
            ><img :src="require('@/assets/df4s4.png')" />
            <a>文章详情</a>
          </div>
        </div>
        <div class="page-main">
          <div class="f-content">
            <div class="page-content">
              <article>
                <div class="title-3">
                  <h1 class="main">
                    {{ articleDetail.title }}
                  </h1>
                  <div class="date">{{ articleDetail.date }}</div>
                </div>
                <div class="data">
                  <div
                    class="text color-1"
                    v-html="articleDetail.content"
                  ></div>
                </div>
                <div class="ul-2">
                  <h2>相关阅读</h2>
                  <div v-for="(item, index) in newsList" :key="index">
                    <a :href="item.linkUrl" class="li">
                      <div class="left">
                        <img :src="item.imageUrl" />
                      </div>
                      <div class="right">
                        <h3>{{ item.title }}</h3>
                        <h4>{{ item.date }}</h4>
                      </div>
                      <div class="both"></div>
                    </a>
                  </div>
                </div>
              </article>
            </div>

            <!-- <div class="share">
              <a href="#">分享</a>
              <a href="#" target="_blank" class="wx"
                ><i class="icon icon_wx"></i>
                <div id="qrcode"></div
              ></a>
              <a href="#" target="_blank" class="in"
                ><i class="icon icon_in"></i
              ></a>
              <a href="#" target="_blank" class="xl"
                ><i class="icon icon_xl"></i
              ></a>
              <a target="_blank" class="lz"><i class="icon icon_lz"></i></a>
              <a href="#" target="_blank" class="email"
                ><i class="icon icon_mail"></i
              ></a>
            </div> -->
            <div class="both"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "@/utils/HttpUtils";
import { newsQuery } from "@/api/news";
import { getNewsList } from "@/api/news";
import { getNewsRelationList } from "@/api/news";

export default {
  data() {
    return {
      articleDetail: {
        id: "",
        title: "微信持续开拓生态 激发商业潜能 赋能品牌新机遇",
        content:
          '<p>“2021微信公开课PRO”在广州正式开课，正值微信上线十周年，微信生态持续发展，包括小程序在内的核心功能为用户和企业创造了更多价值。</p><p>微信公开课是微信面向合作伙伴和开发者的年度盛会，此次大会首次采用全程线上直播应对疫情防控的需求。</p><p>今年的大会重点探讨了目前全球不断加速的数字化转型，讲述了如何通过微信在短期内助力经济复苏以及微信生态所具有的长期战略优势。腾讯一直以来致力于成为各行各业的“数字化助手”，帮助其进行数字化升级并打造一个开放、创新和安全的生态系统。作为腾讯的旗舰产品之一，微信生态代表了一种智能生活方式，并能使来自全球各地的企业轻松触达广大的中国消费者。</p><p><img src="https://static.www.tencent.com/uploads/2021/01/19/43fd559d189d984ceb592570623f9949.png "alt=""/></p><p style="text-align: center"><em>2021微信公开课PRO广州开讲并同步线上直播</em></p><p>通过微信视频号，无论企业还是个人用户都能够轻松创建并观看短视频。上线仅一年，微信视频号便广受欢迎。许多知名品牌例如蔚来汽车、京东、百度等都通过视频号的短视频或直播功能增长粉丝，宣传推广其产品。根据调研发现，女性用户在微信视频号上更为活跃。</p><p>微信小程序上线已经四年，为用户获取商家服务提供简单直接的入口，同时也为商家和服务商创造了巨大的价值。疫情期间，很多商家通过小程序重建与消费者的直连，2020年小程序年均DAU突破4亿，全年累计交易额同比增长超100%。2020年人均使用小程序个数同比增长25%；小程序人均交易金额也实现了67%的提升。微信小程序帮助品牌和商家轻松拥抱数字化，在疫情环境下直连消费者。目前，微信小程序已在各个领域获得了广泛的应用，包括交通运输、百货商场、服饰鞋帽以及体育用品，均有显著增长。未来，微信小程序还将与微信视频号实现更加无缝的对接，为商家和消费者创造更大的价值。</p><p>企业微信作为专门面向企业内沟通交流的工具，持续帮助各个企业提升效率，在疫情期间加强与其客户的互动和沟通。企业微信目前服务的企业用户数已经突破550万，月活用户1.3亿，企业通过企业微信服务了超过4亿微信用户。</p><p>2020年，微信不断优化提升搜一搜的功能，帮助用户更加简单便捷地在微信生态里搜索所需的信息，并将持续提升用户体验。微信小游戏在2020年的月活用户也达到5亿，其中女性用户尤为活跃，为专门面向女性用户开发游戏的开发者带来巨大的机遇。</p><p>微信于2011年正式上线，目前已经成为中国使用最广泛的社交媒体平台，主要功能有即时通讯、社交娱乐以及移动支付等。微信为用户带来了方便快捷的移动数字生活。截至2020年12月，微信及WeChat的合并月活跃账户数已经超过12亿，其中微信小程序的日活用户也已经超过4亿。</p><p></p>',
        date: "2021.01.19",
      },
      newsList: [
        {
          linkUrl: "https://www.tencent.com/zh-cn/articles/2201101.html",
          imageUrl:
            "https://static.www.tencent.com/uploads/2020/12/17/d754015e9298b2694367b737fdb45458.jpg!article.cover",
          imageTitle: "",
          title: "微信助力日本药妆店于疫情期间开拓国际电商业务",
          date: "2021.05.19",
        },
        {
          linkUrl: "https://www.tencent.com/zh-cn/articles/2201088.html",
          imageUrl:
            "https://static.www.tencent.com/uploads/2020/09/22/5a15ea0a737b193c61b5aa48f99ba339.jpg!article.cover",
          imageTitle: "",
          title: "腾讯全球数字生态大会案例：大数据和云计算定制畅游云南体验",
          date: "2021.05.19",
        },
        {
          linkUrl: "https://www.tencent.com/zh-cn/articles/2201039.html",
          imageUrl:
            "https://static.www.tencent.com/uploads/2020/12/17/d754015e9298b2694367b737fdb45458.jpg!article.cover",
          imageTitle: "",
          title: "腾讯副总裁栾娜：“以人为本”才是最重要的",
          date: "2021.05.19",
        },
      ],
    };
  },
  watch: {
    $route: "getNewsParams",
  },
  created() {
    console.log("跳转展示详情页函数...");
    this.getNewsParams();
  },

  methods: {
    getNewsParams() {
      // 取到路由带过来的参数
      const routerParams = this.$route.query.id;
      console.log("detail get id:" + routerParams);
      // 将数据放在当前组件的数据内
      this.articleDetail.id = routerParams;
      this.getNewDetail(this.articleDetail.id);
    },
    openHomePage() {
      this.$router.push({ name: "home" });
    },
    openNewstPage() {
      this.$router.push({ name: "news" });
    },
    getNewDetail(id) {
      console.log("加载文章详情。。。");
      // let pageUrl = "/news/detail";
      let params = {};
      params.id = id;
      newsQuery(params.id).then((response) => {
        console.log(response.data);
        this.articleDetail.content = response.data.content
        this.articleDetail.title = response.data.title
        this.articleDetail.date = response.data.date
      });
      // var data = axios.get(pageUrl, params);
      // console.log(data);
      // this.news.push();
    },
    getRelationNewsList() {
      let pageUrl = "/news/relation";
      let params = {};
      params.pageNo = 1;
      params.pageSize = 3;
      params.newsType = "1";
      getNewsRelationList(params.newsType, params.pageNo, params.pageSize).then(
        (response) => {
          // console.log(response.data);
          this.newsList = response.data.records;
        }
      );
    },
  },
  mounted() {
    // this.getNewDetail();
    this.getRelationNewsList();
  },
};
</script>

<style scoped>
@import "~@/assets/css/articles_2.css";
@import "~@/assets/css/base.css";
@import "~@/assets/css/index.css";
@import "~@/assets/css/base-2.css";
/* @import "../../assets/css/media.css"; */
.look-more {
  cursor: pointer;
}
</style>